<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>amStock Example</title>
		<link rel="stylesheet" href="images/style.css"	type="text/css">

		<script src="../amcharts/amcharts.js" type="text/javascript"></script>
		<script src="../amcharts/serial.js" type="text/javascript"></script>
		<script src="../amcharts/amstock.js" type="text/javascript"></script>

		<script>
			var chartData1 = [];
			AmCharts.ready(function () {
				generateChartData();
				createStockChart();
			});


			function generateChartData() {
				var firstDate = new Date();
				firstDate.setDate(firstDate.getDate() - 500);
				firstDate.setHours(0, 0, 0, 0);

				for (var i = 0; i < 500; i++) {
					var newDate = new Date(firstDate);
					newDate.setDate(newDate.getDate() + i);

					var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
					var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;

					// generate spike here
					if (i > 350 && i < 410) {
						a1 = a1 * 2;
						b1 = b1 * 2;
					}

					chartData1.push({
						date: newDate,
						value: a1,
						volume: b1
					});

				}
			}

			function createStockChart() {
				var chart = new AmCharts.AmStockChart();

				chart.color = "#FFFFFF";
				chart.fontFamily = "Amatic SC";
				chart.fontSize = 20;

				var balloon = chart.balloon;
				balloon.adjustBorderColor = false;
				balloon.color = "#FFFFFF";
				balloon.borderThickness = 1;
				balloon.verticalPadding = 0;


				// DATASETS //////////////////////////////////////////

				var dataSet1 = new AmCharts.DataSet();
				dataSet1.title = "first data set";
				dataSet1.fieldMappings = [{
					fromField: "value",
					toField: "value"
				}, {
					fromField: "volume",
					toField: "volume"
				}];
				dataSet1.dataProvider = chartData1;
				dataSet1.categoryField = "date";
				// set data sets to the chart
				chart.dataSets = [dataSet1];

				// PANELS ///////////////////////////////////////////
				// first stock panel
				var stockPanel1 = new AmCharts.StockPanel();
				stockPanel1.showCategoryAxis = false;
				stockPanel1.title = "Value";
				stockPanel1.percentHeight = 60;

				// graph of first stock panel
				var graph1 = new AmCharts.StockGraph();
				graph1.valueField = "value";
				graph1.useDataSetColors = false;
				graph1.lineColor = "#FFFFFF";
				graph1.lineAlpha = 0.8;
				graph1.fontSize = 25;
				//graph1.balloonText = "[[description]]";
				graph1.showBalloon = false;
				stockPanel1.addStockGraph(graph1);

				// create stock legend
				var stockLegend1 = new AmCharts.StockLegend();
				stockLegend1.periodValueTextComparing = "[[percents.value.close]]%";
				stockLegend1.periodValueTextRegular = "[[value.close]]";
				stockLegend1.labelText = "";
				stockLegend1.markerType = "none";
				stockLegend1.color = "#FFFFFF";
				stockPanel1.stockLegend = stockLegend1;

				var e1 = {
					date: new Date(chartData1[chartData1.length - 120].date),
					type: "pin",
					backgroundColor: "#FFFFFF",
					backgroundAlpha: 0.1,
					graph: graph1,
					text: "M",
					color: "#FFFFFF",

					description: "First contact with Martians"
				};



				dataSet1.stockEvents = [e1];

				// second stock panel
				var stockPanel2 = new AmCharts.StockPanel();
				stockPanel2.title = "Volume";
				stockPanel2.percentHeight = 40;

				var graph2 = new AmCharts.StockGraph();
				graph2.valueField = "volume";
				graph2.type = "column";
				graph2.showBalloon = false;
				graph2.useDataSetColors = false;
				graph2.lineColor = "#FFFFFF";
				graph2.lineAlpha = 0;
				graph2.fillAlphas = 0.8;
				graph2.pattern = {
					url: "patterns/white/pattern3.png",
					width: 4,
					height: 4
				};
				stockPanel2.addStockGraph(graph2);

				var stockLegend2 = new AmCharts.StockLegend();
				stockLegend2.periodValueTextRegular = "[[value.close]]";
				stockLegend2.color = "#FFFFFF";
				stockLegend2.labelText = "";
				stockLegend2.markerType = "none";
				stockPanel2.stockLegend = stockLegend2;

				// set panels to the chart
				chart.panels = [stockPanel1, stockPanel2];

				var panelsSettings = new AmCharts.PanelsSettings();
				panelsSettings.marginLeft = 16;
				panelsSettings.marginRight = 16;
				panelsSettings.color = "#FFFFFF";
				panelsSettings.fontFamily = "Amatic SC";
				panelsSettings.fontSize = 20;
				chart.panelsSettings = panelsSettings;



				// OTHER SETTINGS ////////////////////////////////////
				var sbsettings = new AmCharts.ChartScrollbarSettings();
				sbsettings.graph = graph1;
				sbsettings.graphLineColor = "#FFFFFF";
				sbsettings.graphLineAlpha = 1;
				sbsettings.graphFillColor = "#FFFFFF";
				sbsettings.graphFillAlpha = 0;
				sbsettings.selectedGraphLineColor = "#FFFFFF";
				sbsettings.selectedGraphLineAlpha = 0;
				sbsettings.selectedGraphFillColor = "#FFFFFF";
				sbsettings.usePeriod = "WW";
				sbsettings.selectedGraphFillAlpha = 0;
				sbsettings.gridCount = 0;
				sbsettings.gridColor = "#FFFFFF";
				sbsettings.gridAlpha = 0.7;
				sbsettings.autoGridCount = false;
				sbsettings.skipEvent = false;
				sbsettings.color = "#FFFFFF";
				sbsettings.backgroundColor = "#FFFFFF";
				sbsettings.backgroundAlpha = 0;
				sbsettings.selectedBackgroundColor = "#FFFFFF";
				sbsettings.selectedBackgroundAlpha = 0.3;
				sbsettings.updateOnReleaseOnly = false;

				chart.chartScrollbarSettings = sbsettings;

				var stockEventsSettings = new AmCharts.StockEventsSettings();
				stockEventsSettings.balloonColor = "#000000";
				stockEventsSettings.borderColor = "#FFFFFF";
				chart.stockEventsSettings = stockEventsSettings;

				// CURSOR
				var cursorSettings = new AmCharts.ChartCursorSettings();
				cursorSettings.valueBalloonsEnabled = true;
				cursorSettings.cursorColor = "#FFFFFF";
				cursorSettings.cursorAlpha = 0.7;
				cursorSettings.color = "#000000";
				cursorSettings.valueLineEnabled = true;
				cursorSettings.valueLineBalloonEnabled = true;
				chart.chartCursorSettings = cursorSettings;

				var legendSettings = new AmCharts.LegendSettings();
				legendSettings.marginLeft = 14;
				chart.legendSettings = legendSettings;


				// PERIOD SELECTOR ///////////////////////////////////
				var periodSelector = new AmCharts.PeriodSelector();
				periodSelector.position = "bottom";
				periodSelector.periods = [{
					period: "DD",
					count: 10,
					label: "10 days"
				}, {
					period: "MM",
					count: 1,
					label: "1 month"
				}, {
					period: "YYYY",
					count: 1,
					selected: true,
					label: "1 year"
				}, {
					period: "YTD",
					label: "YTD"
				}, {
					period: "MAX",

					label: "MAX"
				}];
				chart.periodSelector = periodSelector;

				var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
				categoryAxesSettings.axisHeight = 35;
				chart.categoryAxesSettings = categoryAxesSettings;

				var valueAxesSettings = new AmCharts.ValueAxesSettings();
				valueAxesSettings.gridColor = "#FFFFFF";
				chart.valueAxesSettings = valueAxesSettings;

				chart.write('chartdiv');
			}
		</script>
    </head>

    <body style="background-image:url('images/bg.jpg');line-height: 70%">

		<div id="chartdiv" style="position:absolute;top:50px;left:50px; width:940px; height:570px;"></div>

		<img src="images/overlay1.png" style="position: absolute;left:215px;top: 254px;">
		<img src="images/overlay2.png" style="position: absolute;left:316px;top: 380px;">
		<img src="images/overlay3.png" style="position: absolute;left:578px;top: 216px;">
		<img src="images/overlay4.png" style="position: absolute;left:602px;top: 355px;">
    </body>

</html>